React Native中的回调
我试图在原生模块和JavaScript模块之间为原生应用程序构建一个回调函数示例应用程序。React Native中的回调但它说的类回调canoot是found.I尝试使用下面的代码本机模块和JavaScript之间的通信： -MyNativeClass.javaimport com.facebook.react.bridge.CallBack; @ReactMethod public void getText(CallBack callback){ callback.invoke(...
2024-01-10
React Native中的布局
使用width和heightreact native中width和height没有单位，表示的是与设备像素密度无关的逻辑像素点<View style={{width:100,height:100,backgroundColor: 'gray'}}> <Text style={{fontSize: 16}}>测试字体</Text></View>上面的width、height、fontSize在android中宽和高被解析成dp、字体被解析为sp；iOS上宽和高被解析为pt，虽然width和height...
2024-01-10
React Native开发入门
目录：一、前言二、什么是React Native三、开发环境搭建四、预备知识五、最简单的React Native小程序六、总结七、参考资料 一、前言虽然只是简单的了解了一下React的皮毛，但是对React Native的学习就轻松了好多。所以在学习React Native之前，最好还是先学习一下React。因为我学习的iOS开发，对iOS更...
2024-01-10
React Native分享记录
今天我给大家分享React Native先给大家看个好东西这个ios app就是用react native写的，没有用到一句OC，也没有用到webview所以今天的主题是使用js写原生应用React Native的主旨是Learn once, write anywhereReact认为各个平台有其各自的特点和特长，如果使用一套代码，一个界面可能不能发挥各自平台的优势，所以...
2024-01-10
React Native 架构一览
一.架构设计整体上分为三大块，Native、JavaScript 与 Bridge：Native 管理 UI 更新及交互，JavaScript 调用 Native 能力实现业务功能，Bridge 在二者之间传递消息。即：最上层提供类 React 支持，运行在JavaScriptCore提供的 JavaScript 运行时环境中，Bridge 层将 JavaScript 与 Native 世界连接起来。具体的，Shadow Tree 用来定...
2024-01-10
react Native 第四天
1.props : 1.props 就是 Image 标签的src ，input 标签的text 用于组件初始化时需要的一些数据。2.使用props可以定制化插件，使插件可以复用3.props是从父元件传入2.理解state 1.有两种类型的数据可以控制组件，一个是props，props在组件的整个生命周期中是固定的2.如果要改变组件的数据需要改变，我们必须使...
2024-01-10
React Native 开发之IDE
个人暂时使用Atom和Nuclide，虽然有些不方便，不过喜欢界面以及安装简单哈哈，之后可能尝试下别的。译注：React Native官方更推荐使用WebStorm或Sublime Text来编写React Native应用。1. Atom和Nuclide1) Atom编辑器Atom是一个开源版本的编辑器，有着非常强大以及完美的体验，Atom最大的特色就是可以安装很多的插...
2024-01-10React Native的境界0.45
我在React Native的Realm官方docs上看到Realm与RN 0.45不兼容。如果降级RN，我不能做什么？React Native的境界0.45回答：realm-js v1.8.0增加了对使用C++ JavaScript桥的React Native版本的支持。...
2024-01-10
React Native遇到的问题(一)
在我们创建React Native项目的时候发现gradle 版本相对比较低的，而且很多情况下直接编译会报错。而网上的很多解决方案就是gradle version改为1.2.3,于是，我有一个疑问，现在的gradle verion都已经3.0.1了，为什么还不升级呢？但是我发现我直接修改后，更是报各种错。 首先看下图这是我在网上搜到的一与...
2024-01-10
React Native 之 数据持久化
前言因为 实战项目系列 涉及到数据持久化，这边就来补充一下。如本文有错或理解偏差欢迎联系我，会尽快改正更新！如有什么问题，也可直接通过邮箱 277511806@qq.com 联系我。demo链接: https://pan.baidu.com/s/1hsspiio 密码: dk3h数据持久化数据持久化一直都是软件开发中重要的一个环节，几乎所有...
2024-01-10
React Native——组件的生命周期
组件生命周期上流程图描述了组件从创建、运行到销毁的整个过程，可以看到如果一个组件在被创建，从开始一直到运行会依次调用getDefaultProps到render这五个函数；在运行过程中，如果有属性和状态的改变，又会触...
2024-01-10
React Native入门遇到的一些问题
本文示例参考自《React Native第一课》 React Native官方文档中文版（含最新Android内容） 这里只大概记录下我的操作步骤和遇到的问题，一定要牢记下面这条： 如果你在Mac下遇到提示写入权限时，记得在命令前加上sudo 安装开发所需要的环境，参考这里>> 我所遇到的几个问题： 1) 安装brew curl -LsSf http://gith...
2024-01-10
React Native获取手机的各种高度
一、窗口高度即图中黄色+蓝色部分import { Dimensions } from "react-native";const deviceHeight = Dimensions.get('window').height; 二、屏幕高度即图中黄色+蓝色+红色部分import { Dimensions } from "react-native";const deviceHeight = Dimensions.get('screen').height; 三、内容高度即图中蓝色部分import { Style...
2024-01-10
React Native 离线包/图片资源
1). 打包进入项目根目录（如图1，anubis为项目名）执行命令react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/assets/图1.png注：打包时一定要确保"android/app/src/ma...
2024-01-10![[RN] <span style='color:red;'>React Native</span> 调试技巧](/wp-content/uploads/thumbs/534118_thumbnail.jpg)
[RN] React Native 调试技巧
React Native 调试技巧一、 安卓模拟器调出Dev Setting 命令adb shell input keyevent 82二、图片不出来时，先运行此命令，再重新 runreact-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/s...
2024-01-10
React Native 常用的 15 个库
本篇 react native 库列表不是从网上随便找的， 这些是我在我的应用中亲自使用的库。 这些库功能可能跟其它库也有，但经过大量研究并在我的程序中尝试后，我选择了这些库。15. React Native Animatable这个库非常适合快速地向 react Native 应用程序添加简单的动画和转换。这个库有两种使用方式:声明式...
2024-01-10
React Native之FlexBox布局
参考原文链接：https://www.cnblogs.com/wujy/p/5841685.html弹性盒模型（The Flexible Box Module）,又叫Flexbox，意为“弹性布局”，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至...
2024-01-10React Native 截屏组件的示例代码
React Native 截屏组件：react-native-view-shot，可以截取当前屏幕或者按照当前页面的组件来选择截取，如当前页面有一个图片组件，一个View组件，可以选择截取图片组件或者View组件。支持iOS和安卓。安装方法npm install react-native-view-shotreact-native link react-native-view-shot使用示例captureScreen() 截屏方法截取当...
2024-01-10
React Native小白入门学习路径——三
迷茫，真的迷茫。 或许是自己努力的还不够吧，在学习的过程中遇到了很多问题，自己尝试借助搜索引擎解决问题，无奈国内的教程写的还很基础，涉及到稍微具体一点的问题时讲解就比较少更新也比较慢，绝大多数还是很早之前的版本下的处理方式。满满的还总结出一个结论，绝大多数讲入门的教...
2024-01-10
Windows搭建React Native环境
自己搭建了Rctive Native的环境，还是遇到了些问题，记录下。一、环境搭建1.下载安装JDKJDK的下载安装配置最好1.8版本的，我自己的电脑之前安装的是1.7的，在运行的过程中出现过问题。2.下载配置Android SDK因为我自己是做Android开发的，这些都已经下载好了，也可以去AndroidDevTools去下载（http://www.and...
2024-01-10
React Native(十四)——Slider
最近我们rn版的App快要内测了，小伙伴们都在积极的改bug，于是在其中就遇到了关于Slider的部分小知识，特地记录自己用到的部分属性，也许恰好会帮助到用到该组件的你：属性罗列（https://reactnative.cn/docs/0.51/slider.html#content）：View props… 继承View的所有属性；1.disabled:如果为true，用户就...
2024-01-10![[RN] <span style='color:red;'>React Native</span> 实现图片预览](/wp-content/uploads/thumbs/533940_thumbnail.jpg)
[RN] React Native 实现图片预览
[RN] React Native 实现图片预览效果预览：代码如下：'use strict';import React, {Component} from 'react';import {Image, StyleSheet, Text, View, ViewPagerAndroid, Dimensions} from 'react-native';const {width, height} = Dimensions.get("window");//图片地址const PAGE_IMAGES = [ '...
2024-01-10自己动手封装一个React Native多级联动
背景肯定是最近有一个项目，需要一个二级联动功能了！本来想封装完整之后，放在github上面赚星星，但发现市面上已经有比较成熟的了，为什么我在开发之前没去搜索一下（项目很赶进度），泪崩啊，既然已经封装就来说说过程吧任务开始一. 原型图或设计图在封装一个组件之前，首先你要知道...
2024-01-10
React Native 开发之 IDE 选型和配置
React Native 发布一年多了，有不少公司已经在线上产品中或小范围试水，或大范围应用，很多公司或开发者都在为 React Native 的生态系统作出自己的贡献。React Native 的开发基本上是 Javascript ＋ 系统原生开发语言（Java，Objective-C，Swift），原生语言的开发所用的 IDE 没有多余的选择，Android 平台只能使用 An...
2024-01-10
React-native真机调试遇到的问题
React-native真机调试遇到的问题打开官网，有关于如何真机调试的文档：https://reactnative.cn/docs/running-on-device/第一步准备工具： 1、iPhone手机 2、usb数据线 3、Apple ID连上数据线之后，打开Xcode，设置：如果这是第一次在iOS设备上运行app，需要注册开发设备。从Xcode菜单栏打开Product菜单，然后...
2024-01-10
